<script setup>
import { ref, watch } from 'vue';

const emit = defineEmits(['update:value']);
const props = defineProps(['list', 'value']);

const order = ref(props.list[0]);
watch(order, newValue => emit('update:value', newValue.value));

function select({ key }) {
  order.value = R.find( R.propEq(key, 'value'), props.list );
}
</script>

<template>
  <a-dropdown>
    <span>
      <svg style="margin-right: 4px;" t="1687933785870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4907" width="18" height="18"><path d="M388.937 93c16.505 0 29.885 13.389 29.885 29.905v815.13l-0.01 0.792c-0.629 26.014-32.162 38.951-50.859 20.502L72.902 668.183l-0.551-0.558c-11.203-11.638-11.15-30.16 0.255-41.733l0.557-0.551c11.63-11.21 30.14-11.158 41.705 0.255l244.183 240.953V122.905l0.009-0.706C359.435 106.01 372.667 93 388.937 93z m302.306 712.822c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h149.634z m87.356-195.534c16.505 0 29.884 13.389 29.884 29.905 0 16.28-13 29.522-29.179 29.897l-0.705 0.008h-236.99c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h236.99z m82.758-195.534c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.609c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h319.748z m82.758-195.435c16.505 0 29.885 13.389 29.885 29.905 0 16.28-13 29.522-29.18 29.897l-0.705 0.008H541.61c-16.505 0-29.885-13.389-29.885-29.905 0-16.28 13-29.522 29.18-29.897l0.705-0.008h402.506z" p-id="4908"></path></svg>
      {{ order.label }}
    </span>
    <template #overlay>
      <a-menu @click="select">
        <a-menu-item
          v-for="o in props.list"
          :key="o.value">
          <span :style="{ color: order.value == o.value ? 'var(--main-color)' : 'var(--default-color)' }">
            {{ o.label }}
          </span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style scoped>
.ant-dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
